<template>
	<view class="home">
		<view class="search-box">
			<image src="/static/images/localShop/icon_search.png" class="icon-search" mode=""></image>
			<input type="text" placeholder="请输入店铺名称" v-model="params.keywords" />
			<view class="screen-item" @click="getShopList">
				<text>筛选</text>
				<image src="/static/images/localShop/icon_screen.png" mode=""></image>
			</view>
		</view>
		<view class="shop-item" @click="handleDetail(item.id)" v-for="(item,index) in list" :key="item.id">
			<view class="shop-title">
				<image :src="$wanlshop.oss(item.avatar)" class="shop-logo" mode=""></image>
				<view class="shop-content">
					<view class="shop-name">{{item.shopname}}</view>
					<view>
						<image src="/static/images/localShop/icon_dw.png" class="shop-dw" mode=""></image>
						<text class="shop-address">{{item.city}}</text>
					</view>
				</view>
				<image src="/static/images/localShop/icon_more.png" class="shop-more" mode=""></image>
			</view>
			<view class="shop-goods">
				<view class="goods-item" v-for="el in item.shop_recommend" :key="el.id">
					<image :src="$wanlshop.oss(el.image)" mode=""></image>
					<view>
						<text>{{el.title}}</text>
						<text>{{el.price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					page: 1,
					pageSize: 20,
					keywords: '',
				},
				list: []
			};
		},
		onLoad() {
			this.getShopList()
		},
		methods: {
			getShopList() {
				uni.request({
					url: '/wanlshop/shop/getShopList',
					method: 'GET',
					data: this.params,
					success: ({ data }) => {
						let res = data
						if (this.params.page == 1) {
							this.list = res.data
						} else {
							this.list = [...this.list, ...res.data]
						}
					}
				})
			},
			handleDetail(id) {
				uni.navigateTo({
					url: `/pages/product/shopDetail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		display: flex;
		align-items: center;
		padding: 30rpx 22rpx;
		font-size: 28rpx;
		background: #fff;
		border-top: 1rpx solid #F5F5F5;
		position: sticky;
		top: 0;
		z-index: 999;

		input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		.icon-search {
			width: 36rpx;
			height: 36rpx;
			margin-right: 20rpx;
			margin-left: 20rpx;
		}

		.screen-item {
			color: #333;
			font-weight: 500;
			padding-left: 50rpx;
			position: relative;

			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
			}
		}

		.screen-item::before {
			content: "";
			width: 2rpx;
			height: 24rpx;
			background-color: #BCBCBC;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}

	.shop-item {
		background: #fff;
		border-radius: 12rpx;
		margin: 20rpx 24rpx;

		.shop-title {
			padding: 30rpx 20rpx;

			.shop-logo {
				width: 80rpx;
				height: 80rpx;
				border-radius: 12rpx;
				float: left;
			}

			.shop-content {
				float: left;
				width: calc(100% - 180rpx);
				margin-left: 20rpx;
			}

			.shop-name {
				font-size: 32rpx;
				width: 100%;
				font-weight: 500;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.shop-address {
				font-size: 24rpx;
				color: #999;
				font-weight: 500;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.shop-dw {
				width: 28rpx;
				height: 28rpx;
				vertical-align: middle;
				margin-right: 5rpx;
			}

			.shop-more {
				width: 32rpx;
				height: 32rpx;
				float: right;
				margin-top: 20rpx;
			}
		}

		.shop-goods {
			margin: 0 20rpx;
			margin-top: 80rpx;
			padding: 30rpx 0rpx;
			border-top: 1px solid #f5f5f5;
			clear: both;

			.goods-item {
				display: inline-block;
				color: #ff0000;
				font-size: 20rpx;
				font-weight: 500;
				text-align: center;
				width: calc(100% / 3);

				text {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 85%;
					display: inline-block;
				}

				text+text {
					font-size: 32rpx;
				}

				image {
					width: 190rpx;
					height: 190rpx;
				}
			}
		}
	}
</style>